<template>
	<view class="warp">
		<view class="order">
			<view class="order-code">
				预约单号: {{list.bcode}}
			</view>
			<view class="order-content">
				<view class="content-left">
					<image :src="list.product.thumbs_text" mode=""></image>
				</view>
				<view class="content-right">
					<view class="top-left">
						车辆名称:{{list.product.name}}
					</view>
					<view class="right-top">
						门店:{{list.store.name}}店
					</view>
					<view class="right-car">
						预约时间: {{list.bdate_text}}
					</view>
				</view>
			</view>
			<view class="order-free">
				车辆价格: ￥{{list.product.price}}万
			</view>
		</view>
		<view class="">
			<u-button type="primary" @click="remove(bcode)">取消预约</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bcode: '',
				list: {},
			}
		},
		onLoad(options) {
			this.bcode = options.code
			console.log(this.bcode)
			this.getDetail()
		},
		methods: {
			getDetail() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/booking/Cardserver/info',
					method: 'GET',
					data: {
						code: this.bcode
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.list = res.data.data
					},
				})
			},
			remove(code) {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/booking/Cardserver/remove',
					method: 'POST',
					data: {
						code: code
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.data.data == 1) {
							setTimeout(() => {
								uni.$u.toast('取消预约成功')
								setTimeout(() => {
									uni.hideToast();
									//关闭提示后跳转
									uni.navigateBack({
										delta: 2
									});
								}, 1500)
							}, 0);
						}else {
							uni.$u.toast('取消预约失败，请稍后再试')
						}
					},
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #e1e1e1;
}
.warp {
	.order {
		margin: 20rpx auto;
		background-color: #ffffff;
		height: 305rpx;
		width: 90%;
		border-radius: 30rpx;
		// border: 1rpx solid;
		.order-code {
			margin-left: 20rpx;
			margin-top: 10rpx;
		}
		.order-top {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			padding: 15rpx;
		}
		.order-content {
			padding: 10rpx;
			display: flex;
			height: 200rpx;
			.content-left {
				width: 40%;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content-right {
				padding: 10rpx;
				width: 60%;
				.right-top {
					font-size: 30rpx;
				}
				.right-car {
					font-size: 26rpx;
					color: #adadad;
					margin-top: 10rpx;
				}
				.top-left {
					font-size: 30rpx;
				}
			}
		}
		.order-free {
			width: 100%;
			font-size: 30rpx;
			text-align: right;
			padding: 10rpx;
			color: crimson;
		}
	}
	.refund{
		margin: 20rpx auto;
		background-color: #ffffff;
		height: 350rpx;
		width: 90%;
		border-radius: 30rpx;
		.refund-top {
			font-size: 35rpx;
		}
	}
	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
}
</style>
